<template>
  <div class="player bg"
       ref="player">
    <!-- 播放器 -->
    <div class="banxin2 tanxin">
      <div class="left">
        <a href="javascript:void(0)"
           class="pre bg"
           @click="preSong"></a>
        <a href="javascript:void(0)"
           class="pass bg"
           @click="pause"
           ref="pass"></a>
        <a href="javascript:void(0)"
           class="next bg"
           @click="nextSong"></a>
      </div>
      <div class="midle">
        <img :src="song.picUrl"
             alt="">
        <div class="m-right">
          <div class="songname">
            <span class="name">{{song.name}}</span>
            <span class="songauthor">{{ song.author }}</span>
          </div>
          <div class="m-player">
            <audio :src="song.url"
                   class="audio"
                   ref="audio"
                   autoplay
                   loop></audio>
            <div class="m-audio">
              <div class="cur"
                   ref="cur"></div>
            </div>
            <div class="m-time">
              <span class="m-now">{{ timeComp(obj.now) }}</span>/
              <span class="m-total">{{ timeComp(song.dt) }}</span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { songUrl } from '@/assets/js/request'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      //歌曲信息
      song: { id: null, name: '', picUrl: '', dt: 0, author: '', url: '' },
      //是否播放
      isPlay: false,
      //计时器
      timer: null,
      //歌单索引
      index: 0,
      //音频现在的时间
      obj: { now: 0 },
    }
  },
  mounted() {
    if (this.$refs.player) {
      this.$nextTick(() => {
        if (!this.song.id) {
          this.$refs.player.style.display = 'none'
        } else {
          this.$refs.player.style.display = 'block'
        }
      })
    }
  },
  computed: {
    //时间格式化456156 --》02：32
    timeComp() {
      return function (param) {
        let time = Math.round(param / 1000)
        let minute = Math.floor(time / 60)
        let second = time - minute * 60
        if (minute == 0 || minute < 10) {
          minute = '0' + minute
        }
        if (second == 0 || second < 10) {
          second = '0' + second
        }
        return minute + ':' + second
      }
    },
    ...mapState('song', ['songList']),
  },
  methods: {
    pause() {
      this.isPlay = !this.isPlay
      this.play()
    },
    // 播放时间变化
    playTime() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.obj.now + 1000 > this.song.dt) {
          clearInterval(this.timer)
          this.obj.now = 0
          //放完随机下一首
          this.changeIndex()
        } else {
          this.obj.now += 1000
        }
      }, 1000)
    },
    //index--》播放方式
    changeIndex() {
      //随机方式
      let random = Math.floor(Math.random() * (this.songList.length - 1))
      this.index = random
      this.song = this.songList[this.index]
    },
    //下一首
    nextSong() {
      this.$refs.audio.pause()
      if (this.index == this.songList.length) {
        this.index = 0
      } else {
        this.index++
      }
      this.song = this.songList[this.index]
    },
    //上一首
    preSong() {
      this.$refs.audio.pause()
      if (this.index == 0) {
        this.index = this.songList.length
      } else {
        this.index--
      }
      this.song = this.songList[this.index]
    },
    play() {
      if (this.isPlay) {
        setTimeout(() => {
          this.$refs.audio.play()
          this.$refs.pass.classList.remove('pass-off')
          this.playTime()
        }, 150)
      } else {
        this.$refs.audio.pause()
        this.$refs.pass.classList.add('pass-off')
        clearInterval(this.timer)
      }
    },
  },
  watch: {
    //歌曲变化
    'song.id': {
      handler(n, o) {
        if (n) {
          //根据id请求歌曲
          this.obj.now = 0
          songUrl({ id: this.song.id, level: 'exhigh' }).then((res) => {
            this.isPlay = true
            this.song.url = res.data[0].url
            this.play()
          })
        }
      },
    },
    songList: {
      handler(n, o) {
        if (this.songList.length == 0) {
          this.$nextTick(() => {
            this.$refs.player.style.display = 'none'
          })
        } else {
          this.$refs.player.style.display = 'block'
          this.song = { ...this.songList[this.index], url: '' }
        }
      },
    },
    //进度条
    'obj.now': {
      handler(n, o) {
        let length = n / this.song.dt
        this.$refs.cur.style.width = length * 100 + '%'
      },
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.bg {
  background: url('../assets/image/playbar.png') no-repeat 0 9999px;
}
.player {
  background-position: 0 0;
  height: 53px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-repeat: repeat-x;
  animation: 0.5s;
  .banxin2 {
    text-align: left;
    justify-content: flex-start;
    height: 100%;
    column-gap: 20px;
    margin: 3px auto;
    box-sizing: border-box;
    .left {
      a {
        width: 28px;
        height: 28px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
      }
      .pre {
        background-position: 0 -130px;
      }
      .pass {
        width: 36px;
        height: 36px;
        background-position: 0 -165px;
      }
      .pass-off {
        background-position: -40px -204px;
      }
      .next {
        background-position: -80px -130px;
      }
    }
    .midle {
      img {
        width: 33px;
        height: 34px;
        border-radius: 4.5px;

        border: 1px solid #000;
      }
      .m-right {
        margin-left: 5px;
        line-height: 20px;
        display: inline-block;
        vertical-align: top;
        .songname {
          color: #fff;
          font-size: 12px;
          .name {
            max-width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .songauthor {
            font-size: 12px;
            color: #9b9b9b;
            margin-left: 20px;
          }
        }
        .m-player {
          width: 493px;
          height: 9px;
          .audio {
            display: none;
          }
          .m-audio {
            max-width: 85%;
            width: 85%;
            height: 100%;
            display: inline-block;
            background: url(@/assets/image/statbar.png) no-repeat 0 9999px;
            background-position: right -30px;
            .cur {
              width: 0;
              height: 100%;
              background: url(@/assets/image/statbar.png) no-repeat 0 9999px;
              background-position: left -66px;
              transition: 0.1s;
            }
          }
          .m-time {
            font-size: 12px;
            float: right;
            color: #797979;
            text-shadow: 0 1px 0 #121212;
            .m-now {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>